<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 工具 -->
      <!-- <div>
        <el-upload
          ref="uploadOrderRef"
          slot="right"
          class="filter-item"
          :headers="headers"
          :action="orderUrl"
          :limit="1"
          :show-file-list="false"
          :http-request="customOrderUpload"
        >
          <el-button type="primary" size="mini" icon="el-icon-upload2" :loading="btn.outbound" class="filter-item" plain @click="orderUpload">出库单上传</el-button>
        </el-upload>
        <el-upload
          ref="uploadStorageRef"
          slot="right"
          class="filter-item"
          :headers="headers"
          :action="storageUrl"
          :limit="1"
          :show-file-list="false"
          :http-request="customStorageUpload"
        >
          <el-button type="success" size="mini" icon="el-icon-upload2" :loading="btn.storage" class="filter-item" plain @click="storageUpload">库存信息上传</el-button>
        </el-upload>
      </div> -->
      <div class="button-group-container">
        <!-- 出库单操作区 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>出库单操作区</span>
          </div>
          <div class="button-group">
            <el-upload
              ref="uploadOrderRef"
              style="width: 48%;"
              :headers="headers"
              :action="orderUrl"
              :limit="1"
              :show-file-list="false"
              :http-request="customOrderUpload"
            >
              <el-button style="width: 100%;" type="primary" icon="el-icon-upload" :loading="btn.outbound" plain @click="orderUpload">出库单上传</el-button>
            </el-upload>
            <!-- <el-button type="primary" plain icon="el-icon-upload">出库单上传</el-button> -->
            <el-button style="width: 48%;" type="success" :loading="btn.outboundDownload" plain icon="el-icon-download" @click="downloadOutboundExcel">出库单模板下载</el-button>
          </div>
        </el-card>

        <!-- 库存信息操作区 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>库存信息操作区</span>
          </div>
          <div class="button-group">
            <el-upload
              ref="uploadStorageRef"
              style="width: 48%;"
              :headers="headers"
              :action="storageUrl"
              :limit="1"
              :show-file-list="false"
              :http-request="customStorageUpload"
            >
              <el-button style="width: 100%;" type="primary" size="mini" icon="el-icon-upload" :loading="btn.storage" plain @click="storageUpload">库存信息上传</el-button>
            </el-upload>
            <el-button style="width: 48%;" type="success" plain :loading="btn.storageDownload" icon="el-icon-download" @click="downloadInventoryExcel">库存模板下载</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadOrderFileAPI, uploadStorageFileAPI, downloadOutboundAPI, downloadStorageAPI } from '@/api/work/upload'
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadView',
  data() {
    return {
      headers: {
        'Authorization': getToken(),
        'Content-Type': 'multipart/form-data'
      },
      orderUrl: process.env.VUE_APP_BASE_API + 'api/fileUpload/importInventoryInfo',
      storageUrl: process.env.VUE_APP_BASE_API + 'api/fileUpload/importOutboundInfo',
      btn: {
        outbound: false,
        storage: false,
        storageDownload: false,
        outboundDownload: false
      }
    }
  },
  methods: {
    async customOrderUpload(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      try {
        this.btn.outbound = true
        const res = await uploadOrderFileAPI(formData)
        if (res.result === 'OK') {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.outbound = false
      }
    },
    async customStorageUpload(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      try {
        this.btn.storage = true
        const res = await uploadStorageFileAPI(formData)
        if (res.result === 'OK') {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.data)
        }
      } finally {
        this.btn.storage = false
      }
    },
    async orderUpload() {
      this.$refs.uploadOrderRef.clearFiles() // 清除已选择的文件
      this.$refs.uploadOrderRef.submit() // 重新提交上传
    },
    async storageUpload() {
      this.$refs.uploadStorageRef.clearFiles() // 清除已选择的文件
      this.$refs.uploadStorageRef.submit() // 重新提交上传
    },
    async downloadOutboundExcel() {
      try {
        this.btn.outboundDownload = true
        const res = await downloadOutboundAPI()
        if (res && res instanceof Blob) {
          this.downloadFile(res, '出库单模板')
        } else {
          this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
        }
      } finally {
        this.btn.outboundDownload = false
      }
    },
    async downloadInventoryExcel() {
      try {
        this.btn.storageDownload = true
        const res = await downloadStorageAPI()
        if (res && res instanceof Blob) {
          this.downloadFile(res, '库存模板')
        } else {
          this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
        }
      } finally {
        this.btn.storageDownload = false
      }
    },
    // 解析excel文件
    downloadFile(obj, name) {
      const url = window.URL.createObjectURL(new Blob([obj]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      this.fileName = `${name}_${new Date().getTime()}.xlsx`
      link.setAttribute('download', this.fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

<style scoped lang="scss">
.button-group-container {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: flex-start; /* 从左侧开始对齐 */
  align-items: flex-start; /* 垂直对齐到顶部 */
  gap: 20px; /* 卡片之间的间距 */
  width: 800px; /* 容器宽度占屏幕的 1/2 */
  margin-left: 0; /* 靠左对齐 */
}

.box-card {
  width: calc(50% - 10px); /* 每个卡片占容器宽度的一半，减去间距 */
}

.button-group {
  display: flex;
  justify-content: space-between;
}

::v-deep .el-upload {
  width: 100%;
}
</style>
